<template>
  <!--头部,包含搜索-->
  <div id="header">

    <div class="search_layer">
      <div class="logo_search">
        <img class="logo fl" src="/logo.png"/>
        <div class="search fr">
          <el-input v-model="input" placeholder="搜索内容" class="search_content fl"/>
          <el-button type="primary" class="fl search_btn" @click="doSearch">搜索</el-button>
          <div class="hots_search">
            <el-link v-for="item in hotSearch" v-bind:key="item.name" :href="item.href">{{item.name}}</el-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PageHeader",
    props: {
      "activeIndex": String,
      "hotSearch": Array
    },
    data() {
      return {
        input: "",
      }
    },
    methods: {
      doSearch: function () {
        if(this.input === ''){
          alert("请输入搜索的内容");
          return;
        }
        console.log(encodeURI(this.input));
        window.location.replace("/search?key="+encodeURI(this.input));
      }
    }
  }
</script>

<style lang="scss">
  @import "../assets/header";
</style>
